import AgentSetting from '@/pages/Users/components/AgentSetting';
import PasswordSetting from '@/pages/Users/components/PasswordSetting';
import PhoneSetting from '@/pages/Users/components/PhoneSetting';
import {
  ContactsTwoTone,
  GoldTwoTone,
  LockTwoTone,
  SafetyCertificateTwoTone,
} from '@ant-design/icons';
import ProList from '@ant-design/pro-list/lib';
import React, { useEffect, useState } from 'react';

interface Props {
  user: API.Users;
}

const defaultData = [
  {
    id: 1,
    name: '账户密码',
    image: <ContactsTwoTone />,
    desc: '当前密码强度：强',
  },
];

type DataItem = (typeof defaultData)[number];
const UserSetting: React.FC<any> = (props) => {
  const { user } = props;
  const [dataSource, setDataSource] = useState<DataItem[]>();
  useEffect(() => {
    setDataSource([
      {
        id: 1,
        name: '账户密码',
        image: <ContactsTwoTone />,
        desc: '当前密码强度：强',
      },
      {
        id: 2,
        name: '密保手机',
        image: <LockTwoTone />,
        desc: '已绑定手机：' + user?.phone,
      },
      {
        id: 3,
        name: '代理设置',
        image: <GoldTwoTone />,
        desc: '当前等级：' + user?.agentName,
      },
      {
        id: 4,
        name: '白名单',
        image: <SafetyCertificateTwoTone />,
        desc: '未设置密保问题，密保问题可有效保护账户安全',
      },
    ]);
  }, [user]);
  const getLayout = (id: number) => {
    let layout = <></>;
    switch (id) {
      case 1:
        layout = <PasswordSetting user={user} />;
        break;
      case 2:
        layout = <PhoneSetting user={user} />;
        break;
      case 3:
        layout = <AgentSetting user={user} />;
        break;
    }

    return layout;
  };
  return (
    <ProList<DataItem>
      rowKey="id"
      headerTitle="安全设置"
      dataSource={dataSource}
      pagination={false}
      showHeader={false}
      onDataSourceChange={setDataSource}
      metas={{
        title: {
          dataIndex: 'name',
        },
        avatar: {
          dataIndex: 'image',
          editable: false,
        },
        description: {
          dataIndex: 'desc',
        },
        actions: {
          render: (text, row, index, action) => [getLayout(row.id)],
        },
      }}
    />
  );
};
export default UserSetting;
